<script setup lang="ts">
import { getJackWingListApi } from '@/api/jack'
import type { jackWingingItem } from '@/types/jack'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { useMemberStore } from '@/stores'
import NoList from '@/components/NoList.vue'
import {baseURL} from '@/utils/http'

// 表单数据
const form = ref({
  userName: '',
  openJackTime: '',
  jackPeriod: '',
})

const memberStore = useMemberStore()
const amount = memberStore.profile.amount
// 获取获奖列表
const wingList = ref<jackWingingItem[]>([])
const getWingList = async () => {
  const res = await getJackWingListApi()
  wingList.value = res.data.records
  if (wingList.value.length>0) {
    wingList.value.map(item => {
      item.areaNames = item.areaName.split(' ')
      if (item.appUser.avatar) {
        if (!item.appUser.avatar.includes('http')) {
          item.appUser.avatar = baseURL + item.appUser.avatar
        }
      }
    })
  }
}

// 修改日期
const onBirthdayChange: UniHelper.DatePickerOnChange = (ev) => {
  form.value.openJackTime = ev.detail.value
}

onLoad(() => {
  getWingList()
})

// 搜索
const searchList = async () => {
  if (form.value.jackPeriod || form.value.userName || form.value.openJackTime) {
    const res = await getJackWingListApi(form.value)
    wingList.value = res.data.records
  } else {
    uni.showToast({ icon: 'fail', title: '清输入搜索条件' })
  }
}
</script>

<template>
  <view class="top_info">
    <text>门店返奖总计：</text><text>{{Number(amount).toFixed(2)}}元</text>
  </view>
  <!-- <view class="content">
    <form>
      <view class="form-item">
        <text class="label">姓名</text>
        <input class="input" placeholder="请填写姓名" v-model="form.userName" />
      </view>
      <view class="form-item">
        <text class="label">开奖日期</text>
        <picker
          class="picker"
          mode="date"
          start="2024-01-01"
          :end="new Date()"
          :value="form.openJackTime"
          @change="onBirthdayChange"
        >
          <view v-if="form.openJackTime">{{ form.openJackTime }}</view>
          <view class="placeholder" v-else>请选择日期</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">奖期</text>
        <input class="input" placeholder="请填写" v-model="form.jackPeriod" />
      </view>
    </form>
    <button class="button" @tap="searchList">搜索中奖人员</button>
  </view> -->

  <view class="list" v-if="wingList.length > 0">
    <!-- <view class="title">兑奖人员列表</view> -->
    <view class="people_item" v-for="item in wingList" :key="item.id">
      <image v-if="item.appUser.avatar" :src="item.appUser.avatar" mode="aspectFill" />
      <image src="@/static/images/default-img.jpg" mode="scaleToFill" v-else />
      <view class="info">
        <view class="top">
          <view class="number">期号：{{ item.jackPeriod }}</view>
          <uni-tag
            :text="
              item.status == '1'
                ? '中奖'
                : item.status == '2'
                ? '已兑奖'
                : item.status == '3'
                ? '已过期'
                : '已作废'
            "
            custom-style="background-color: #27ba9b; border:none; color: #fff;"
            :circle="true"
          ></uni-tag>
        </view>
        <view class="foot">
          <view class="name">{{ item.appUser.nickname?item.appUser.nickname:item.userName }}</view>
          <view class="level">{{ item.jackGrade }}</view>
          <view class="cash">奖金：{{ item.jackPrice }}元</view>
          <view class="cash" v-if="item.jackGrade != '幸运奖'">返奖：{{ item.busCommission }}元</view>
          <view class="cash" v-else>幸运奖</view>
        </view>
      </view>
    </view>
  </view>
  <no-list v-else />
</template>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
.top_info {
  padding: 15px;
  margin: 12px;
  background-color: #fff;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.people_item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  flex-wrap: wrap;
  image {
    width: 40px;
    height: 40px;
  }
  .info {
    width: calc( 100% - 50px);
  }
  .top {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    height: 20px;
    margin-bottom: 5px;
  }
  .foot {
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    height: 20px;

    .name,
    .level {
      color: #27ba9b;
      font-weight: bold;
      width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: inherit;
    }
  }
}

.list {
  margin: 40rpx 0;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    padding-right: 5px;
    align-items: center;
    padding-left: 15px;
    height: 40px;
    background-color: #ddd;
    color: #666;
    font-size: 14px;
  }
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
